<app-common-header [title]="'auth.reset-pwd.input-password.title' | translate"></app-common-header>
<ion-content>
<div class="login_content">
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="updatePassword()">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-label class="login_title">
          {{'auth.reset-pwd.input-password.resetpwd' | translate}}
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-header class="login_word">
          {{'auth.reset-pwd.input-password.please_enter_pwd' | translate}}
        </ion-header>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="login_input">
        <ion-grid>
          <ion-row  class="password-item">
            <ion-col size="6">
              <div class="custom-label">
                {{'auth.reset-pwd.input-password.newPwd' | translate}}
              </div>
            </ion-col>
            <ion-col size="6">
              <div>
                <ion-input type="password" clearInput placeholder="{{'auth.reset-pwd.input-password.newPwd' | translate}}" formControlName="password"></ion-input>
              </div>
            </ion-col>
          </ion-row>
          <ion-row *ngIf="password.invalid && (password.dirty || password.touched)">
            <ion-col size="12" >
              <div *ngIf="password.errors.required" class="form-error-item">
                {{'auth.reset-pwd.input-password.newPwd_required' | translate}}
              </div>
              <div *ngIf="password.hasError('pattern')" class="form-error-item">
                {{'auth.reset-pwd.input-password.password_format_error' | translate}}
              </div>
            </ion-col>
          </ion-row>
          <ion-row  class="password-item">
            <ion-col size="6">
              <div class="custom-label">
                {{'auth.reset-pwd.input-password.repeatPwd' | translate}}
              </div>
            </ion-col>
            <ion-col size="6">
              <div>
                <ion-input type="password" clearInput placeholder="{{'auth.reset-pwd.input-password.repeatPwd' | translate}}" formControlName="repeatPassword"></ion-input>
              </div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="12" *ngIf="repeatPassword.invalid && (repeatPassword.dirty || repeatPassword.touched)">
              <div *ngIf="repeatPassword.errors.required" class="form-error-item">
                {{'auth.reset-pwd.input-password.repeatPwd_required' | translate}}
              </div>
              <div *ngIf="repeatPassword.hasError('pattern')" class="form-error-item">
                {{'auth.reset-pwd.input-password.password_format_error' | translate}}
              </div>
            </ion-col>
            <ion-col size="12" *ngIf="validateForm.hasError('notMatch')">
              <div class="form-error-item">
                {{'auth.reset-pwd.input-password.pwd_not_match' | translate}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button class="customer-btn" fill="clear" expand="block" type="submit" [disabled]='validateForm.invalid'>
          {{'auth.reset-pwd.input-password.complete' | translate}}
          <ion-spinner [hidden]="!loading"></ion-spinner>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</div>
</ion-content>


